<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <link crossorigin="anonymous" integrity="sha384-9GKi7Mg3e8wxMnh60bnNnc9kuwGfarF0StF1UbfPt4F5GMVfxBgfh8/pW4iHavxG"
          href="https://lib.baomitu.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"
            src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            src="https://lib.baomitu.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>

<div id="app">


    <div class="pannel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <!--form-inline子元素不再占一行而是并排-->
        <div class="panel-body form-inline">
            <label>
                Id:
                <input type="text" class="form-control" v-model="id">
            </label>
            <label>
                Name:
                <!--<input type="text" class="form-control" v-model="name" @keyup.enter="add">-->
                <input type="text" class="form-control" v-model="name" @keyup.f2="add">
                <!--这里@keyup.13与@keyup.enter,意思是一样的，13是enter的键盘码，所以这里可以用键盘码替代，但是键盘码不好记住。-->
                <!--比如你想用f2代替这里，f2是113，你也可以自定义一个全局的按键修饰符-->

            </label>
            <!--在vue中使用事件绑定机制为元素指定处理函数的时候，如果加()小括号就可以为传参了-->
            <input type="button" value="添加" class="btn btn-primary" @click="add()">

            <label>
                搜索关键字：
                <!--想要每次刷新页面search文本框都获得焦点，需要自定义vue指令，这里比如v-focus-->
                <!--<input type="text" class="form-control" v-model="keywords" v-focus v-color>-->
                <!--如果想使用v-color="'blue'"这样来设置字体的颜色，还得设置指令的其他参数-->
                <input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
                <!--//注意上面如果不写单引号表示一个属性，回去vm中找，找不到就会报错，所以要加单引号-->

            </label>
        </div>


    </div>
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
        </tr>
        </thead>

        <tbody>
        <!--要用搜索框就不能再这么写死list了，需要指定一个方法 如 下2-->
        <!--<tr v-for="item in list" :key="item.id">-->
        <!--<td v-text="item.id"></td>-->
        <!--<td v-text="item.name"></td>-->
        <!--<td v-text="item.ctime"></td>-->
        <!--<td><a href="" @click.prevent="del(item.id)">删除</a></td>-->
        <!--</tr>-->
        上面的list可以替换成search方法
        <tr v-for="item in search(keywords)" :key="item.id">
            <td v-text="item.id"></td>
            <td v-text="item.name"></td>
            <!--<td v-text="item.ctime | dataFormat(item.ctime)"></td>-->
            <td>{{item.ctime | dataFormat}}</td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>

    </table>
</div>

<script>

    //a.时间格式化过滤器 --必须在vm之前
    Vue.filter('dataFormat', function (dataStr , pattern="") {
        var dt = new Date(dataStr);//根据给定的时间字符串得到特定的时间
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2 , '0');
        var d = dt.getDate().toString().padStart(2 , '0');
        // return y + '-' + m + '-' + d
        /*if(pattern == null){//这里也可以用es6形参的默认值方法来写-function (dataStr , pattern="")-，都可以避免pattern为null的报错
            return `${y}-${m}-${d}`
        }*/
        if(pattern.toLowerCase() === 'yyyy-mm-dd'){
            return `${y}-${m}-${d}`//这可不是单引号是esc下面那个
        }else {
            var h = dt.getHours().toString().padStart(2 , '0');
            var m = dt.getMinutes().toString().padStart(2 , '0');
            var s = dt.getSeconds().toString().padStart(2 , '0');
            return `${y}-${m}-${d}-${h}-${m}-${s}`//这可不是单引号是esc下面那个
        }
        //padStart函数，给字符串填充数据，参数1-填充后的总位数，参数2-用于填充的字符====padEnd同理
    })
    //时间格式化过滤器 --必须在vm之前
    //这个过滤器在vm之外所以所有的vm实例都可以共享的，下一篇讲如何构建一个私有的过滤器

    //b.自定义全局的按键修饰符
    Vue.config.keyCodes.f2 = 113;

    //c.自定义全局指令
    // 全局指令不带s，私有的要带--参数1是指令的名称，这里不需要加v- ，调用的地方要加.
    // 参数2是一个对象，这个对象身上有一些钩子函数，这些函数可以在特定的阶段执行相关的操作
    Vue.directive('focus' , {
        //这些function的第一个参数都表示被绑定的元素。
        bind:function (el) {//每当指令被绑定到函数上的时候执行，仅执行一次
            //el.focus()//在bind时，el还在内存中，无法获取焦点所以这里调用focus无效（要在插入dom之后才能获取焦点）
        },
        inserted:function (el) {//元素插入到dom中时执行
            el.focus()//el原生的dom元素
        },
        updated:function (el) {//VNode更新的时候执行，多次

        }
    })
    //d.自定义一个指令改变字体颜色
    Vue.directive('color' , {
        bind:function (el, binding) {//改颜色bind时候执行就可以了，只要绑定了，这个元素就肯定有内联样式了，不管有没有插入到dom
            //将来在插入dom的时候，也会带着样式插进去的
            // el.style.color = 'red'
            console.log(binding.value)
            console.log(binding.expression)
            el.style.color=binding.value//这里是用value--注意value和expression的区别
        }
        //和js行为有关的操作，最好在inserted中执行，防止失效
        //和样式相关的，可以在bind中执行
        //bind执行时机早于inserted
    })


    var vm = new Vue({
        el: "#app",
        data: {
            id: '',
            name: '',
            keywords: '',
            list: [
                {id: 1, name: '奔驰', ctime: new Date()},
                {id: 2, name: '宝马', ctime: new Date()},
                {id: 3, name: '奥迪', ctime: new Date()},
                {id: 4, name: '奥拓', ctime: new Date()}
            ]
        },
        methods: {
            add() {
                console.log("methods-add - ok")
                var car = {id: this.id, name: this.name, ctime: new Date()}
                this.list.push(car)
                this.id = this.name = ''
            },
            del(id) {
                /*this.some找到某个满足条件的值时就终止
                this.list.some((item, i) => {
                    if (item.id == id) {
                        // 在数组的some方法中，如果return true就会立即终止这个循环
                        this.list.splice(i, 1)
                        return true
                    }
                })*/
                //找索引专用方法
                var index = this.list.findIndex(item => {
                    if (item.id == id) {
                        return true
                    }
                })
                this.list.splice(index, 1)
                // splace 第一个位置表示从哪里开始删，第二个参数表示删多少个
            },
            /*search(keywords){
                var newList=[]
                this.list.forEach(item=>{
                    if(item.name.indexOf(keywords) != -1){
                        newList.push(item)
                    }
                })
                return newList
            }*/
            //forEach some filter findindex这些都属于数组的新方法
            // 都会对数组中的每一项进行遍历，执行相关的操作

            search(keywords) {
                var newList = this.list.filter(item => {
                    // if(item.name.indexOf(keywords) != -1){}
                    //es6中提供了新方法string.prototype.includes方法
                    if (item.name.includes(keywords)) {
                        return item;
                    }
                })
                return newList
            }
        }
    })

    //1.过滤器只能使用在插值表达式和v-bind时使用，通常用来字符串格式输出
    //2. 过滤器调用时候的格式，  {{name | nameope}} 意思是我们在输出name的值之前，先调用nameope进行一下处理。并把处理的结果，当作内容渲染到这个位置--nameope为过滤器的名字
    //3.怎么定义一个过滤器呢？语法如下.filter：参数1 过滤器名称，参数2 处理方法
    //function中的data就是管道符传过来的值，这里就是name
    /*Vue.filter('nameope', function (name) {
        return data + '123'
    })*/
    //4.nameope还可以添加参数{{name | nameope('newStr')}},这个时候function的第二个参数位过滤器传的参数newStr,第一个参数位管道符传过来的值
    //5.且支持多参数传递-nameope后面加一个参数，就要在function中追加一个参数
    /*Vue.filter('nameope', function (name , arg) {
        return data + arg
    })*/
    //6.过滤器还支持多次调用如 {{name | nameope | nameope2 | nameope3}}，，这样会依次调用ope过滤，ope1，ope2过滤。并把最终的结果放大这个位置
    //string的replace方法只能替换第一个，想要替换全局需要写一个正则 xxx.replace(/aaa/g,'bbb') g表示全局的意思


</script>

</body>
</html>